<template>
    <div class="box" :class="{'change':$store.state.adclosed,
    'opacity':$store.state.isscoll}">
        <img class="detail" src="../../assets/menu.png" alt="">
      
        <input type="text" class="input" placeholder="富婆通讯录">
        <a href="javascript:;">
            <img class="search" src="../../assets/search.png" alt="">
        </a>
        </div>
</template>

<script>
    export default {
        name: "jdmenu",
    }
</script>

<style>
    .box {
        top: 50px;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 15;
        height: 50px;
        overflow: hidden;
        transition: all 0.2s ease;
        background-color: #E43130;
    }
    

    .opacity {
        background-color: rgba(228, 49, 48, 1);
    }

    .change {
        top: 0;
    }

    .detail {
        width: 25px;
        display: inline-block;
        margin: 15px 10px 15px 15px;
    }

    .input {
        display: inline-block;
        width: 70%;
        border: none;
        border-radius: 15px;
        height: 30px;
        overflow: hidden;
        background: #f7f7f7;
        font-size: 14px;
        -webkit-box-align: center;
        line-height: 30px;
        margin: 10px;
        padding-left: 15px;
    }
    .search {
        width: 7%;
        position: relative;
        top: 12px;
    }
</style>